<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的边框属性_border</title>
    <style>
        div {
          width: 400px;
          height: 400px;
          background-color: skyblue;
          /* 当只标注边框的样式时 边框的大小是3px黑色的 */
          /*border-style: solid;*/
          /* 复合属性(四个方向的) */
          /*border: green 10px solid;*/


          /* 单个方向的  */
          /*border-left: blue 10px solid;!* 左方向 *!*/
          /*border-right: green 20px dashed;!* 右方向 *!*/
          /*border-top: #ffccff 30px double;!* 上方向 *!*/
          /*border-bottom: lime 40px dotted;!* 下方向 *!*/

          /* 单个方向分开 */
          /*下方向的*/
          border-bottom-color: green;
          border-bottom-style: solid;
          border-bottom-width: 20px;

          /* 上方向的 */
          border-top-color: lime;
          border-top-style: dotted;
          border-top-width: 30px;

          /* 左方向的 */
          border-left-color: blue;
          border-left-style: double;
          border-left-width: 40px;

          /* 右方向 */
          border-right-color: orange;
          border-right-style: dashed;
          border-right-width: 50px;

        }
    </style>
</head>
<body>
    <div>你好啊</div>
</body>
</html>